<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        const colors = ['red', 'green', 'blue'];

        // 将数组中的元素分别赋值以下变量
        // const firstColor = colors[0];
        // const secondColor = colors[1];
        // const thirdColor = colors[2];

        // 使用数组解构为变量赋值，数组中的元素会按照顺序分别赋值给这三个常量
        // const [firstColor, secondColor, thirdColor] = colors;
        // console.log(firstColor, secondColor, thirdColor) // 'red', 'green', 'blue'
        // const [,,thirdColor] = colors;  // 'blue'
        // console.log(thirdColor)

        // 使用数组解构为变量重新赋值
        // let firstColor = 'black', secondColor = 'pink';
        // [firstColor, secondColor] = colors
        // console.log(firstColor, secondColor);  // 'red', 'green'

        // 为变量设置默认值
        // 如果数组中没有第四个元素，fourthColor 会被赋值为 undefined
        // const [firstColor, secondColor, thirdColor, fourthColor] = colors;
        // console.log(firstColor, secondColor, thirdColor, fourthColor)  // 'red', 'green', 'blue', undefined
        // 如果数组中没有第四个元素，则使用默认值 'white' 为 fourthColor 赋值
        const [firstColor, secondColor, thirdColor, fourthColor = 'white'] = colors;
        console.log(firstColor, secondColor, thirdColor, fourthColor)  // 'red', 'green', 'blue', 'white'
    </script>
</body>
</html>